/**
* author：郝少聪
* version：1.0
* describe：搜索
**/
import React, { Component } from 'react';
import { Text, View, TextInput, Image } from 'react-native';
import styles from './assets/style';
// import SearchItem from './components/search-item';

class Texts extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <View style={styles.box}>
                {/* 搜索 */}
                <View style={[styles.transverse]}>
                    <View style={styles.search} >
                        <Image style={{ width: 10, height: 10, marginLeft: 10, marginRight: 10 }} source={require('../../assets/images/search.png')} />
                        <Text style={styles.searchText}>搜索您想看的</Text>
                    </View>
                    <Text>取消</Text>
                </View>
                <View>
                    <View style={styles.searchHistory}>
                        <Text>搜索历史</Text>
                        <Image style={styles.delete} source={require('./assets/images/delete.png')} />
                    </View>
                    <View style={styles.historyPopular}>
                        <View style={styles.historicalRecord}>
                            <Text>京剧</Text>
                        </View>
                        <View style={styles.historicalRecord}>
                            <Text>女驸马黄梅戏</Text>
                        </View>
                        <View style={styles.historicalRecord}>
                            <Text>戏曲</Text>
                        </View>
                        <View style={styles.historicalRecord}>
                            <Text>文化讲堂</Text>
                        </View>
                        <View style={styles.historicalRecord}>
                            <Text>秦腔</Text>
                        </View>
                        <View style={styles.historicalRecord}>
                            <Text>黄梅戏</Text>
                        </View>
                        <View style={styles.historicalRecord}>
                            <Text>昆剧</Text>
                        </View>
                        <View style={styles.historicalRecord}>
                            <Text>京剧大全</Text>
                        </View>
                    </View>
                </View>
                {/* 热门搜索 */}
                <View style={styles.hotSearch}>
                    <View style={styles.searchHistory}>
                        <Text>热门搜索</Text>
                    </View>
                    <View style={styles.historyPopular}>
                        {
                            [1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => {
                                return <View key={index} style={styles.hotSearchItem}>
                                    <Text><Text style={item < 4 && styles.hotSearchItemTextActive}>{item}</Text> 京剧2进宫</Text>
                                </View>
                            })
                        }
                    </View>
                </View>
            </View>

        );
    }
}


// const Texts = StackNavigator({
//     SearchFile:{screen:SearchItem},
// });

export default Texts;